<template>
  <el-select
    :value="value"
    filterable
    remote
    :placeholder="$t('please_select',{name:''})"
    :loading="searchLoading"
    clearable
    @change="changeEmployer"
    reserve-keyword
    :remote-method="getEmployerList"
  >
    <el-option
      v-for="item in employerAllList"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
    </el-option>
  </el-select>
</template>

<script>
import { listEmployee } from "@/api/custom/employeeList";
export default {
  props: {
    value: [String, Number, Array, null],
    employerId: {
      type: [String, Number, null],
      default: null,
    },
  },
  data() {
    return {
      employerAllList: [],
      searchLoading: false,
    };
  },
  watch: {
    employerId: {
      handler(val) {
        this.getEmployerList();
      },
      immediate: true,
    },
  },
  created() {
    this.getEmployerList(null);
  },
  methods: {
    getEmployerList(searchValue) {
      this.searchLoading = true;
      let queryParams = {
        pageNum: 1,
        pageSize: 100,
      };
      listEmployee({
        ...queryParams,
        employeeName: searchValue,
        employerId: this.employerId,
      }).then((response) => {
        this.employerAllList = response.data.records.map((item) => {
          return {
            label: item.employeeName,
            value: item.id,
          };
        });
        this.searchLoading = false;
      });
    },
    changeEmployer(value) {
      this.$emit("input", value);
      let find = this.employerAllList.find((item) => item.value == value);
      this.$emit("change", find);
    },
  },
};
</script>
<style scoped lang="scss"></style>
